@use "github-theme.css";

:root {
    --fontStack-sansSerif:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    --vp-font-family-base: var(
        --fontStack-sansSerif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans",
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji"
    );
    --vp-font-family-mono:
        "JetBrains Mono", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
        monospace, var(--vp-font-family-base);

    --color-blue-soft: #daedfe;

    --color-neutral4: #eceef0;
    --color-neutral9: #889096;
    --color-neutral8: #c1c8cd;

    --vp-sidebar-width: 320px !important;
    --vp-sidebar-width-collapse: 300px !important;

    --color-nav-background: rgba(251, 251, 253, 0.6);
    --color-nav-sidebar-background: rgba(246, 246, 247, 0.6);
}

.dark {
    --color-neutral4: #26292b;
    --color-neutral8: #4c5155;
    --color-neutral9: #697177;

    --color-nav-background: rgba(27, 27, 31, 0.6);
    --color-nav-sidebar-background: rgba(22, 22, 24, 0.6);
}

/*front*/
@font-face {
    font-family: JetBrains Mono;
    src: url("./font/JetBrainsMono.woff2") format("woff2");
}

div {
    -webkit-tap-highlight-color: transparent; /* 针对 WebKit 浏览器 */
    touch-action: manipulation; /* 防止默认行为 */
}

.VPSidebar {
    scrollbar-width: thin;
}

html {
    scroll-behavior: smooth;

    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
        word-wrap: break-word;
    }

    img {
        border-radius: 5px;
    }
}

.go-to-top {
    background-color: var(--color-neutral4) !important;
    &:hover {
        background-color: var(--color-neutral8) !important;
    }
}

.VPFooter {
    z-index: -1 !important;
}

.VPLocalNavOutlineDropdown .items {
    /* display: flex; */
    background-color: var(--vp-c-bg-soft);
}

.VPNav {
    .container {
        background-color: transparent;
        .content {
            background-color: transparent;
            .content-body {
                background-color: transparent !important;
            }
        }
    }
}

.VPSidebar .curtain,
.VPNavBar.has-sidebar .wrapper .content .content-body,
.VPLocalNav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: var(--color-nav-background) !important;
}

.VPSidebar .curtain {
    background-color: var(--color-nav-sidebar-background) !important;
}

.VPNavBar {
    .divider .divider-line {
        height: 0;
        border-bottom: 1px solid var(--vp-c-divider);
    }

    &.home {
        .divider .divider-line {
            height: 0;
            border-bottom: none;
        }
    }
}

.VPNavBar .container .content .curtain::before {
    display: none;
}

.VPPluginSearch-search-item:hover {
    background-color: var(--vp-custom-block-tip-bg);
    color: var(--vp-custom-block-details-text);
}

// 侧边目录
#VPSidebarNav {
    .group {
        border-top: none !important;
        padding: 5px 20px !important;
        border-radius: 10px;

        transition: all 0.2s ease-in-out;
        margin-top: 5px;

        &:hover {
            background-color: var(--color-neutral4);
        }

        &:has(.is-active) {
            background-color: var(--color-neutral4);
        }
    }
}

// 侧边目录 Item
.VPSidebarItem {
    --gap: 3px;

    h2.text,
    h3.text,
    h4.text,
    h5.text,
    p.text {
        display: flex;
        gap: var(--gap);
        align-items: center;
    }

    &.level-0 {
        padding-bottom: 0 !important;
    }

    &.level-1 {
        padding-left: 10px !important;
    }
}

// 首页标题
.VPHome .heading .clip {
    background: -webkit-linear-gradient(
        315deg,
        rgb(210, 86, 53) 10%,
        #647eff 50%,
        rgb(238, 224, 112) 90%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.DocSearch-Modal {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 0.25s;
    animation-duration: 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideInUp {
    from {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

// 正文
.content {
    h4,
    h5,
    h6 {
        margin-top: 10px;
    }
}

// 浮动导航栏
.VPLocalNavOutlineDropdown .items {
    border: none;
}

// 导航栏
.outline-link {
    &.active {
        color: var(--vp-c-brand-1) !important;
    }
}

// medium-zoom
.medium-zoom-overlay {
    z-index: 30;
}

.medium-zoom-image {
    z-index: 9999 !important;
}

/**
 * Component: Progress Bar
 * -------------------------------------------------------------------------- */
.bprogress {
    --bprogress-color: var(--vp-c-brand-1);
    --bprogress-box-shadow: none;
    position: fixed !important;
}
